import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'

export default defineComponent({
  props: {
    title: {
      type: String,
      default: '默认标题',
    },
  },
  setup(props) {
    const count = ref(0)

    return () => (
      <div class="jsx-container">
        <h2>{props.title}</h2>
        <div>{dayjs().format('YYYY-MM-DD HH:mm:ss')}</div>
        <p>当前计数: {count.value}</p>
        <button
          onClick={() => {
            ElMessage({
              message: 'dasdas',
              duration: 0,
            })
          }}
        >
          增加
        </button>

        {count.value > 5 && <p class="warning">计数已经大于5了!</p>}

        <ul>
          {Array.from({ length: count.value }).map((item, index) => (
            <li key={index}>项目 {index + 1}</li>
          ))}
        </ul>
      </div>
    )
  },
})
